<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>我的</title>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <!--<link href="../css/list.css" rel="stylesheet" />-->
    <link href="../../admin/css/style.css" rel="stylesheet" />
    <script src="../../js/app.js"></script>
    <script src="../../js/mui.min.js"></script> 
    <style type="text/css">
    	.mui-btn{
    		padding: 3px;
    		margin: auto 5px;
    	}
    	.mui-table-view-cell{
    		padding: 5px 15px;
    	}
    	input{
    		padding: inherit;
    		width: 30px;
    	}
    </style>
    <script type="text/javascript">

    </script>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">我的购物车</h1>
		</header>

		<div class="mui-content" id="pullrefresh">
			
			<ul class="mui-table-view" >
				<div class="friend-list-left" id="commodity">
					
					<ul class="mui-table-view" style="font-size: 0.8em;">
						<li class="mui-table-view-cell mui-media">
						店铺：<span>一号店铺</span>
					</li>
					<li class="mui-table-view-cell mui-media">
						<img class="mui-media-object mui-pull-left" style="width:100px" src="http://placehold.it/40x30">
						<div>商品名：大中华</div>
						<input type="checkbox" name="id" onclick=" selected(this,'','')" style="right:10px;top:2px;position: absolute;" type="radio" value="'+goodsjson[str][strb].id+'" />
						<div >		
						<span style="margin-right: 10px;">单价:<span >10</span>元</span>
						<span style="margin-right: 10px;">数量:<span>10</span>件</span>
						<span style="margin-right: 10px;">共:<span>10</span>元</span>
						</div>
						
					</li>
					<li class="mui-table-view-cell mui-media" style="padding: 5px 15px">
						合计：110元   <span style="margin-right: 10px;color:red;float: right;">立即付款</span>
					</li>
					</ul>
				</div>
			       <div class="friend-list-left" id="item"></div>
		    </ul>
	    </div>
<nav class="mui-bar mui-bar-tab">

<a class="mui-tab-item">
        <!--<span class="mui-icon mui-icon-gear"></span>-->
        <span class="mui-tab-label">合计：<span id="total">0</span>元</span>
    </a>
<a class="mui-tab-item">
	<button class="mui-tab-label" onclick="gowindow()">去结算</button>
<!--<button class="mui-btn mui-btn-danger" type="button" style="padding: 5px 10px;">立即购买</button>-->
    </a>
</nav>
	</body>
	<script type="text/javascript">
		mui.init({
 　　　　　	swipeBack: true, //启用右滑关闭功能
		　	beforeback: function(){//监听物理返回按键的方法
			myStorage.setItem('shoppingcart',JSON.stringify(goodsjson));
//			alert(JSON.stringify(goodsjson));
　　　　　return true;
　　　　　}
		})
		//去结算下订单跳往确认页
function gowindow(){
	//把数据存入数据库
	myStorage.setItem('shoppingcart',JSON.stringify(goodsjson));
	mui.openWindow('orders_confirm.html');
}
		var shoppingcart=myStorage.getItem('shoppingcart')|| '';
		var goodsjson={};
		if(shoppingcart!='' && isJSON(shoppingcart)){
			goodsjson=JSON.parse(shoppingcart);
			openlook(goodsjson);
		}
		var inparr={};
function add(tid,type,shop_id){
	   	var num = document.getElementById('number'+tid);//数量
	   	var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/ 
	   	if (!re.test(num.value)) {
	   		num.value=0;
	   		
	   	}
		var price=document.getElementById("price"+tid).innerText;
		var total=document.getElementById("total");
  		var checkbox = document.getElementById('checkbox'+tid);//数量
            if(type==='+'){
            	if(parseInt(goodsjson[shop_id][tid].stock)<=parseInt(num.value)){
            		alert('库存不足'+goodsjson[shop_id][tid].stock+':'+num.value);
            		return false;
            	}
            	//数量+1
    			num.value = parseInt(num.value)+1;
    			//如果商品是选中状态合计金额会随着改变
    			if(checkbox.checked==true){
					total.innerHTML = parseInt(total.innerText)+parseInt(price);
				}
    		}else{
    			if(num.value>1){
    				//数量-1
    				num.value = parseInt(num.value)-1;
    				//如果商品是选中状态合计金额会随着改变
    				if(checkbox.checked==true){
						total.innerHTML = parseInt(total.innerText)-parseInt(price);
						
						//把购物车选中的商品数量-1
//							inparr[shop_id][tid].number=parseInt(inparr[shop_id][tid].number)-1;
					}
    			}
    		}
    		//g更新购物车商品的数量
    		goodsjson[shop_id][tid]["number"]=num.value;
//	    		totalone.innerHTML = parseInt(number.value)*parseInt(price.value);
    }
function deletecommodity(shop_id,tid){
	if(confirm("确定删除这个商品吗？")==false){
		return false;
	}
	var html=document.getElementById("checkbox"+tid);
	var num=document.getElementById("number"+tid).value;
	var price=document.getElementById("price"+tid).innerText;
	var total=document.getElementById("total");
	var commodity=document.getElementById("commodity"+tid);
	var goods=document.getElementById("goods"+shop_id);
	if(num<=0){
		html.checked=false;
		return false;
	}
if(html.checked==true){
		//统计价格更新
		total.innerHTML = parseInt(total.innerText)-parseInt(price)*parseInt(num);	
}
	//删除选中的商品
	delete goodsjson[shop_id][tid];
	commodity.parentNode.removeChild(commodity);
	//如果json长度少于3个 说明店铺里不存在商品了， 删除店铺
	if(Object.keys(goodsjson[shop_id]).length<3){
		//删除选中的商店
		delete goodsjson[shop_id];
		goods.parentNode.removeChild(goods);
	}
}
//选中商品
function selected(shop_id,tid){
	var html=document.getElementById("checkbox"+tid);
	var num=document.getElementById("number"+tid).value;
	var price=document.getElementById("price"+tid).innerText;
	var total=document.getElementById("total");
	if(num<=0){
		alert('数量不能为空');
		html.checked=false;
		return false;
	}
//	alert(JSON.stringify(goodsjson[shop_id][tid]));
		//获取商品数量
		goodsjson[shop_id][tid]["number"]=num;
	if(html.checked==false){
		//统计价格更新
		total.innerHTML = parseInt(total.innerText)-parseInt(price)*parseInt(num);	
		goodsjson[shop_id][tid].chosen='0';
		//删除选中的商品
//		delete inparr[shop_id][tid];
	}else{
		goodsjson[shop_id][tid].chosen='1';
	//统计价格更新
		total.innerHTML = parseInt(total.innerText)+parseInt(price)*parseInt(num);	
	}
}


//显示购物车列表
function openlook(goodsjson){	
			var goodsstr='';
			var total=0;
			//遍历出店铺
		for(var str in goodsjson){
//			alert(i);
			var goodsstrb='';
			var goodstotal=0;
			var i=0;
			for(var strb in goodsjson[str]){
				i++;
				if(typeof(goodsjson[str][strb])==='object'){
					var checked="";
					if(goodsjson[str][strb].chosen=='1'){
						//只在选中状态下累加金额
						checked='checked="checked"';
						goodstotal+= parseInt(goodsjson[str][strb].number)*parseInt(goodsjson[str][strb].price);
					}
					goodsstrb+='<li class="mui-table-view-cell mui-media name" id="commodity'+goodsjson[str][strb].id+'">'+
						'<img class="mui-media-object mui-pull-left" style="width:100px" src="'+home.uploads+'/img/item/'+goodsjson[str][strb].poster+'">'+
						'<div>商品名：'+goodsjson[str][strb].title+'</div>'+
//						onclick="chakan(this,{id:'+goodsjson[str][strb].id+',number:'+goodsjson[str][strb].number+'})"
						'<input type="checkbox"   '+checked+' id="checkbox'+goodsjson[str][strb].id+'" onclick="selected('+goodsjson[str].shop_id+','+goodsjson[str][strb].id+')" style="right:10px;top:2px;position: absolute;" type="radio" value="'+goodsjson[str][strb].id+'" />'+
						'<div  class="mui-icon mui-icon-trash"  onclick="deletecommodity('+goodsjson[str].shop_id+','+goodsjson[str][strb].id+')" style="right:12px;top:30px;position: absolute;color:red" /></div>'+
						'<div >'+	
						'<span style="margin-right: 10px;">单价:<span id="price'+goodsjson[str][strb].id+'">'+goodsjson[str][strb].price+'</span>元</span>'+
						'<span style="margin-right: 20px;"><span>库存:'+goodsjson[str][strb].stock+' </span> <span> '+
'<div class=""style=" border-radius: 3px;border: solid 0px #D6D6D6;display:inline-block;">'+
  '<button class=""  style="padding:1px 8px;margin: 0;" onclick="add(\''+goodsjson[str][strb].id+'\',\'-\',\''+goodsjson[str].shop_id+'\')">-</button>'+
  '<input class=""  id="number'+goodsjson[str][strb].id+'" name="number"readonly="readonly" style="padding:0;margin: auto;text-align:center;" value="'+goodsjson[str][strb].number+'" />'+
  '<button class="" style="padding:1px 7px;margin: 0;"onclick="add(\''+goodsjson[str][strb].id+'\',\'+\',\''+goodsjson[str].shop_id+'\')">+</button>'+
'</div>'+
						'</span></span>'+
						'</div>'+
						
					'</li>';
				}	
			}
			total+=goodstotal;	
			goodsstr+='<ul class="mui-table-view" style="font-size: 0.8em;"id="goods'+goodsjson[str].shop_id+'">'+
						'<li class="mui-table-view-cell mui-media">'+
						'店铺：<span>'+goodsjson[str].shopname+'</span>'+
					'</li>'+goodsstrb+
					'</ul>';
		}
		document.getElementById('total').innerHTML=total;
		document.getElementById('commodity').innerHTML=goodsstr;
}

</script>